<template>
	<!-- 租赁收入管理 -->
	<div class="leaseMngPage">
		<div class="commonHead">
			<!-- tag菜单组件, 此处传参需要调整，参考资源库 -->
			<IncomeTagMenu projectName="业财管控" />
		</div>
		<div class="content">
			<div class="header">
				<el-form :inline="true" :model="formInline" class="demo-form-inline">
					<el-form-item label="">
						<el-select
							v-model="formInline.selectedColumnArr"
							class="w-135"
							multiple
							collapse-tags
							collapse-tags-tooltip
							placeholder="全部"
							@change="columnShowChange"
						>
							<el-option
								v-for="item in state.columsOptions"
								:key="item.value"
								:label="item.label"
								:value="item.propName"
							>
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="资产类型">
						<el-select
							class="w-138"
							v-model="formInline.type"
							placeholder="全部"
						>
							<el-option
								v-for="item in formInline.typeOptionsArr"
								:key="item.type"
								:label="
									item.type == 1
										? '农贸市场'
										: item.type == 2
										? '商业(绿道)'
										: item.type == 3
										? '商业(商铺)'
										: item.type == 4
										? '写字楼'
										: item.type == 5
										? '综合体'
										: '其他'
								"
								:value="item.type"
							/>
						</el-select>
					</el-form-item>
					<el-form-item label="租赁周期筛选">
						<el-date-picker
							v-model="formInline.dateVal"
							type="daterange"
							value-format="YYYY-MM-DD"
							range-separator="——"
							start-placeholder="开始时间"
							end-placeholder="结束时间"
							size="large"
							style="width: 236px"
						/>
					</el-form-item>
					<el-form-item label="搜索">
						<el-input
							v-model="formInline.searchVal"
							style="width: 182px"
							placeholder="请输入资产或客户名"
						/>
					</el-form-item>
					<el-button
						color="#FF7B50"
						style="color: #fff"
						type="primary"
						@click="searchBtn"
						>查看</el-button
					>
					<el-button color="#F0F0F0" @click="resetBtn">重置</el-button>
					<el-button
						plain
						color="#FF7B50"
						:icon="RefreshLeft"
						@click="refreshBtn"
						>刷新</el-button
					>
					<el-button
						class="f-r"
						plain
						color="#FF7B50"
						:icon="Download"
						@click="exportPlanBtn"
						>导出Excel表格</el-button
					>
				</el-form>
			</div>
			<div class="bigDataCard">
				<div class="itemCard" v-for="(n, i) in cardInfo.cardArr" :key="i">
					<div class="cardTitle">{{ n.title }}</div>
					<div class="cardInfo">
						<div class="moneyBox">
							{{ n.num }} <span>({{ n.unit }})</span>
						</div>
						<img :src="n.url" alt="" />
					</div>
				</div>
			</div>
			<el-table
				ref="multipleTable"
				:data="state.tableData"
				tooltip-effect="dark"
				style="width: 100%; margin-bottom: 23px"
			>
				<el-table-column prop="index" label="序号" align="center">
				</el-table-column>
				<el-table-column
					v-for="(n, i) in state.showColumsArr"
					:key="i"
					:prop="n.propName"
					:label="n.label"
					:width="state.showColumsArr.length <= 6 ? '' : n.width"
					align="center"
				>
					<template #default="scope">
						<div v-if="n.propName == 'address'">
							{{ scope.row.region }}{{ scope.row.street }}
						</div>
						<div v-if="n.propName == 'timeRange'">
							{{ dayjs(scope.row.signStartTime).format("YYYY-MM-DD") }} 至
							{{ dayjs(scope.row.signEndTime).format("YYYY-MM-DD") }}
						</div>
						<div v-if="n.propName == 'invoiceStatus'">
							<el-tag v-if="scope.row.invoiceStatus == -1" class="tagStyle"
								>否</el-tag
							>
							<el-tag v-else class="tagStyle" type="danger">是</el-tag>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" fixed="right">
					<template #default="scope">
						<el-button
							color="#FF7B50"
							style="color: #fff; width: 68px; height: 31px"
							type="primary"
							@click="detailsBtn(scope.row.contractId)"
							>详情</el-button
						>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				v-model:page-size="defualtPageSize"
				:total="state.total"
				:page-sizes="[20, 30, 40, 50, 100, 150, 200]"
				layout="total, sizes, prev, pager, next, jumper"
				:current-page="state.currentPage"
				@current-change="pageChange"
				@size-change="sizeChange"
			/>
		</div>
	</div>
</template>

<script setup>
import { onMounted, ref, reactive, onBeforeMount } from "vue";
import {
	ElForm,
	ElFormItem,
	ElTable,
	ElTableColumn,
	ElSelect,
	ElOption,
	ElIcon,
	ElPagination,
	ElTag,
	ElDatePicker,
} from "element-plus";
import { RefreshLeft, Download } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { sortCompare, numToFixed } from "@/common/utils/GlobalUtils";
import dayjs from "dayjs";
import IncomeTagMenu from "@/components/IncomeTagMenu.vue";
import { leaseApi } from "@/api/property";
const router = useRouter();

// 列表头部
const defualtPageSize = ref(50);
const formInline = reactive({
	type: "",
	dateVal: "",
	searchVal: "",
	typeOptionsArr: [],
	selectedColumnArr: [], // 选中的要展示的列
});
// 初始获取资产类型选项
const initAssetsSelectOptions = () => {
	leaseApi.getAllAssets().then((res) => {
		const { code, data } = res;
		if (code == 200) {
			formInline.typeOptionsArr = data;
		}
	});
};

// table相关
const state = reactive({
	columsOptions: [
		{
			value: 0,
			label: "承地方租客户(乙方)",
			propName: "customerName",
			width: 150,
		},
		{
			value: 1,
			label: "租赁资产",
			propName: "assetsName",
			width: 120,
		},
		{
			value: 2,
			label: "租赁位置",
			propName: "address",
			width: 200,
		},
		{
			value: 3,
			label: "租赁类型",
			propName: "type",
		},
		{
			value: 4,
			label: "租赁合同名",
			propName: "contractName",
			width: 150,
		},
		{
			value: 5,
			label: "合同编号",
			propName: "contractId",
			width: 200,
		},
		{
			value: 6,
			label: "租赁周期",
			propName: "timeRange",
			width: 190,
		},
		{
			value: 7,
			label: "应收租金总额",
			propName: "receivableTotalRent",
			width: 130,
		},
		{
			value: 8,
			label: "实收租金总额",
			propName: "receivedTotalRent",
			width: 130,
		},
		{
			value: 9,
			label: "未收租金总额",
			propName: "uncollectedTotalRent",
			width: 130,
		},
		{
			value: 10,
			label: "是否已开发票",
			propName: "invoiceStatus",
			width: 110,
		},
	],
	showColumsArr: [],
	tableData: [],
	total: 4, // 总条数
	currentPage: 1, // 当前页
});

// 初始获取table数据
const initTableData = () => {
	const params = {
		pageNum: state.currentPage,
		pageSize: defualtPageSize.value,
		param: {
			queryName: formInline.searchVal,
			assetsType: formInline.type,
			// startTime: formInline.dateVal[0] || "",
			// endTime: formInline.dateVal[1] || "",
			startTime:
				formInline.dateVal === null || formInline.dateVal[0] === undefined
					? ""
					: formInline.dateVal[0],
			endTime:
				formInline.dateVal === null || formInline.dateVal[1] === undefined
					? ""
					: formInline.dateVal[1],
		},
	};
	leaseApi.getAssetsLeasePage(params).then((res) => {
		const { code, data } = res;
		if (code == 200) {
			state.tableData = data.content.map((n, i) => {
				n.index = i + 1;
				return n;
			});
			state.total = data.totalSize;
		} else {
		}
	});
};
const searchBtn = () => {
	initTableData();
};
const resetBtn = () => {
	defualtPageSize.value = 50;
	formInline.searchVal = "";
	formInline.type = "";
	formInline.dateVal = "";
	initTableData();
};
const refreshBtn = () => {
	initTableData();
};
const exportPlanBtn = () => {};
const pangeChangePage = () => {};
const detailsBtn = (id) => {
	console.log("条详情", id);
	router.push({ path: "/industry/income/lease/details", query: { id } });
};

// 初始化设置table默认选中列为全部选项
formInline.selectedColumnArr = state.columsOptions.map((n, i) => {
	return n.propName;
});
state.showColumsArr = state.columsOptions;

// table列的显示控制
const columnShowChange = (val) => {
	console.log("有几个？？？", val);
	let newArr = [];
	if (val.length > 0) {
		val.map((n, i) => {
			state.columsOptions.map((m, j) => {
				if (m.propName == n) {
					newArr.push(m);
				}
			});
		});
		// 按value值进行排序
		newArr.sort(sortCompare("value"));
		state.showColumsArr = newArr;
	}
	if (val.length == 0) {
		state.showColumsArr = [];
	}
};

const pageChange = (val) => {
	state.currentPage = val;
	initTableData();
};

const sizeChange = (val) => {
	defualtPageSize.value = val;
	initTableData();
};

// 金额相关
const cardInfo = reactive({
	cardArr: [
		{
			title: "已收押金总额",
			num: "--",
			url: require("@/assets/iconImg/diya.png"),
			unit: "元",
		},
		{
			title: "应收租金总额",
			num: "--",
			url: require("@/assets/iconImg/zujin.png"),
			unit: "元",
		},
		{
			title: "应收物业费总额",
			num: "--",
			url: require("@/assets/iconImg/wuye.png"),
			unit: "元",
		},
	],
});
// 初始获取金额统计
const initMoney = () => {
	leaseApi.getLeaseStatistics().then((res) => {
		const { code, data } = res;
		if (code == 200) {
			cardInfo.cardArr[0].num = numToFixed(data.receivedTotalDeposit, 2).split(
				"&"
			)[0];
			if (numToFixed(data.receivedTotalDeposit, 2).split("&")[1])
				cardInfo.cardArr[0].unit =
					numToFixed(data.receivedTotalDeposit, 2).split("&")[1] + "元";

			cardInfo.cardArr[1].num = numToFixed(data.receivableTotalRent, 2).split(
				"&"
			)[0];
			if (numToFixed(data.receivableTotalRent, 2).split("&")[1])
				cardInfo.cardArr[1].unit =
					numToFixed(data.receivableTotalRent, 2).split("&")[1] + "元";

			cardInfo.cardArr[2].num = numToFixed(
				data.receivableTotalPropertyFee,
				2
			).split("&")[0];
			if (numToFixed(data.receivableTotalPropertyFee, 2).split("&")[1])
				cardInfo.cardArr[2].unit =
					numToFixed(data.receivableTotalPropertyFee, 2).split("&")[1] + "元";
		}
	});
};

onBeforeMount(() => {});
onMounted(() => {
	initTableData();
	initMoney();
	initAssetsSelectOptions();
});
</script>

<style lang="scss" scoped>
.leaseMngPage {
	.w-182 {
		width: 182px;
	}
	.w-135 {
		width: 135px;
	}
	.w-138 {
		width: 138px;
	}
	.h-40 {
		height: 40px;
	}
	.content {
		.header {
			margin-bottom: 38px;
			.el-form {
				.el-form-item {
					margin-bottom: 0;
				}
			}
		}
		.bigDataCard {
			margin-bottom: 39px;
			display: flex;
			justify-content: space-around;
			.itemCard {
				width: 393px;
				height: 128px;
				background: #ffffff;
				box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.05);
				border-radius: 20px;
				padding: 18px 28px;
				.cardTitle {
					font-size: 18px;
					// font-weight: 400;
					margin-bottom: 26px;
					color: $title-big-color;
				}
				.cardInfo {
					display: flex;
					justify-content: space-between;
					align-items: center;
					.moneyBox {
						font-size: 36px;
						font-weight: bold;
						color: $title-big-color;
						span {
							font-size: 14px;
							// font-weight: 400;
							color: #808080;
						}
					}
					img {
						width: 40px;
						height: 40px;
					}
				}
			}
		}
		.tagStyle {
			width: 34px;
			height: 31px;
		}
	}
}
</style>
